<template>
  <div class="prop-wrap">
    <!-- <h2 class="wrap-label">参数</h2> -->
    <p class="comp-label">
      <span>{{curComp.name || "页面参数"}}</span>
    </p>
    <article class="screen-props" v-show="!curCompID">
      <ul class="screen-props">
        <li class="prop">
          <span class="prop-label">宽</span>
          <el-input-number v-model="screenProps.width" :step="10"></el-input-number>
        </li>
        <li class="prop">
          <span class="prop-label">高</span>
          <el-input-number v-model="screenProps.height" :step="10"></el-input-number>
        </li>
        <li class="prop">
          <span class="prop-label">背景色</span>
          <div class="color-wrap">
            <el-input v-model="screenProps.bkcolor" :disabled="true"></el-input>
            <el-color-picker v-model="screenProps.bkcolor"></el-color-picker>
          </div>
        </li>
      </ul>
    </article>
    <article class="comp-props" v-show="curCompID">
      <ul class="common-props">
        <li class="prop">
          <span class="prop-label">位置</span>
          <div class="inner-wrap">
            <span class="prop-label">X</span>
            <el-input-number v-model="compProps.left" controls-position="right"></el-input-number>
            <span class="prop-label">Y</span>
            <el-input-number v-model="compProps.top" controls-position="right"></el-input-number>
          </div>
        </li>
        <li class="prop">
          <span class="prop-label">尺寸</span>
          <div class="inner-wrap">
            <span class="prop-label">宽</span>
            <el-input-number
              v-model="compProps.width"
              :min="compProps.minWidth"
              controls-position="right"
            ></el-input-number>
            <span class="prop-label">高</span>
            <el-input-number
              v-model="compProps.height"
              :min="compProps.minHeight"
              controls-position="right"
            ></el-input-number>
          </div>
        </li>
      </ul>
    </article>
  </div>
</template>

<script>
export default {
  name: "propertyPen",
  data() {
    return {
      screenProps: {
        width: 1920,
        height: 1080,
        bkcolor: "#fff"
      },
      compProps: {
        left: 30,
        top: 30,
        width: 100,
        height: 40,
        minWidth: 40,
        minHeight: 20
      }
    };
  },
  computed: {
    curCompID() {
      return this.$store.state.currentID;
    },
    curComp() {
      return this.$store.getters.curComp;
    }
  },
  watch: {
    screenProps: {
      deep: true,
      handler(val) {
        this.$store.commit("changeScreenProp", val);
      }
    },
    compProps: {
      deep: true,
      handler(val) {
        this.$store.commit("changeStyle", val);
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
.prop-wrap
  padding 10px
  flex none
  width 350px
  background #fff
  .wrap-label
    text-align left
    height 30px
    line-height 30px
    padding-left 20px
    border-bottom 2px solid #e4e7ed
    font-weight normal
.comp-label
  height 40px
  display flex
  align-items center
  justify-content center
  font-weight bold
  span
    padding 5px 10px
    border-bottom 2px solid #000
.prop
  margin 10px 0
  height 40px
  display flex
  justify-content space-between
  align-items center
  .color-wrap
    width 180px
    display flex
    justify-content space-between
    align-items center
    .el-input.is-disabled
      margin-right 20px
.common-props
  border-bottom 1px solid #dfdfdf
.inner-wrap
  width 72%
  display flex
  justify-content space-between
  align-items center
  .el-input-number
    width 90px
</style>
